<template>
  <el-form
    ref="form"
    :inline="true"
    class="demo-form-inline"
    size="small"
    :model="rullForm"
  >
    <el-form-item
      label="数据库"
      prop="databaseVal"
      :rules="[{ required: true, message: '请选择' }]"
    >
      <el-select v-model="rullForm.databaseVal" clearable placeholder="请选择">
        <el-option
          v-for="item in database"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="数据表"
      prop="databaseTable"
      :rules="[{ required: true, message: '请选择' }]"
    >
      <el-select
        v-model="rullForm.databaseTable"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in dataTable"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit('form')">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      rullForm: {
        databaseVal: '', // 数据库值
        databaseTable: '' // 数据表值
      },
      database: [
        {
          label: '数据库1',
          value: 'stu1'
        },
        {
          label: '数据库2',
          value: 'stu2'
        }
      ],
      dataTable: [
        {
          label: '数据表1',
          value: 'table1'
        },
        {
          label: '数据表2',
          value: 'table2'
        }
      ]
    }
  },
  methods: {
    submit (form) {
      this.$refs[form]
        .validate()
        .then((valid) => {
          let oli = []
          // 查出来的表字段
          let arr = [
            { name: '活动数1', value: 'acvitity1' },
            { name: '活动数2', value: 'acvitity2' },
            { name: '活动数3', value: 'acvitity3' }
          ]
          arr.forEach(ite => {
            oli.push(`<li><span>${ite.name}</span><span>${ite.value}</span></li>`)
          })
          console.log(oli.join(''))
          if (valid) {
            this.$notify({
              title: '表字段',
              dangerouslyUseHTMLString: true,
              duration: 0,
              offset: 0,
              message: `
                <ul class="oul"> ${oli.join()} </ul>`
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less">
.oul {
  width: 100%;
  font-size: 16px;
  li {
    display: flex;
    width: 250px;
    justify-content: space-between;
  }
}
</style>
